<template>
  <view class="header">
    <view class="navbar" :class="{'navbar-mini':!matchLeftWindow, 'popup-menu':popupMenuOpened}">
      <view class="navbar-left">
        <view class="logo pointer" @click="linkTo">
          <image :src="logo" mode="heightFix"></image>
          <text>{{ getTranslate(0) }}</text> <!-- Arcus系统 -->
        </view>
        <uni-icons
            @click="toggleSidebar" type="bars"  size="30"
            color="#999" class="menu-icon"
        ></uni-icons>
      </view>
      <view v-if="matchLeftWindow === false" @click="linkTo">
        <text class="title-text"> {{ getTranslate(0) }} </text>  <!-- Arcus系统 -->
      </view>
      <view class="navbar-right pointer" >
        <view style="position: relative">
          <view class="navbar-user">
            <view style="line-height: 4px; margin-right: 5px" v-if="judge(mode.desktop)">
              <img src="@/static/chang.png" style="width: 25px; height: 25px; margin-right: 5px; margin-left: 5px" @click="changeLanguageButtonStyle">

              <img src="@/static/缩小.png" style="width: 25px; height: 25px" v-if="isBig" @click="changeButtonStyle"/>
              <img src="@/static/放大.png" style="width: 25px; height: 25px" v-else @click="changeButtonStyle"/>
            </view>
            <view @click="showChoice" style="display: flex">
              <uni-icons type="auth-filled" size="30"></uni-icons>
<!--              <view class="username" ><text> {{ getTranslate(1) }}</text></view> &lt;!&ndash; 用户名 &ndash;&gt;-->
<!--              <uni-icons class="arrowdown" type="arrowdown" color="#666" size="13"></uni-icons>-->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UniIcons from "../uni-icons/uni-icons";
import {mapActions, mapState} from "vuex";
import appConfig from '../../api/appConfig.js'
import statusJudge from "../../utils/monitor/statusJudge";
import language from "../../api/language";
import uniWrapper from "../../utils/store/uniWrapper";
import segModal from "../../utils/infos/segModal";

export default {
  name: "segTopMenu",
  components: {UniIcons},
  mixins: [statusJudge],
  props: {
    matchLeftWindow: {
      type: Boolean
    },
    showLeftWindow: {
      type: Boolean
    }
  },
  computed: {
    ...mapState('app', ['nowLanguage'])
  },
  data(){
    return {
      ...appConfig.system,
      logo: '/static/logo.png',
      popupMenuOpened: false,
      isBig: false,
      mode: appConfig.calMode
    }
  },
  watch: {
    showLeftWindow(newVal, oldVal){
      let uniLeftMenuState = {
        matchLeftWindow: this.matchLeftWindow,
        showLeftWindow: this.showLeftWindow
      }
      this.setUniLeftMenuState(uniLeftMenuState)
      if (this.DEBUGGER){
        console.log('uni-app左侧栏回调(是否显示)', newVal)
        console.log('查看是否成功设置', this.$store.state.app.uniLeftMenuState)
      }
    }
  },
  mounted() {
    let uniLeftMenuState = {
      matchLeftWindow: this.matchLeftWindow,
      showLeftWindow: this.showLeftWindow
    }
    this.setUniLeftMenuState(uniLeftMenuState)
    this.setBigImgArea(this.isBig)
  },
  methods: {
    ...mapActions({
      setUniLeftMenuState: 'app/setUniLeftMenuState',
      setBigImgArea: 'app/setShowBigImgArea',
      setLanguage: 'app/setNowLanguage',
      setUserInfo: 'user/setUserInfo',
      setUserHasLogin: 'user/setUserHasLogin'
    }),
    getTranslate(posIndex){
      let langDict = language.getTranslate(language.segTopMenu)
      if (posIndex === 0){
        return langDict.arcusSystem
      }else if(posIndex === 1){
        return langDict.userName
      }else if(posIndex === 2){
        return langDict.logoutTitle
      }else if(posIndex === 3){
        return langDict.logoutContent
      }
    },
    changeLanguageButtonStyle(){
      if (this.nowLanguage === 'CHI'){
        this.setLanguage('ENG')
      }else{
        this.setLanguage('CHI')
      }
    },
    changeButtonStyle(){
      this.isBig = !this.isBig
      this.setBigImgArea(this.isBig)
    },
    linkTo() {
      uni.reLaunch({
        url: '/'
      })
    },
    toggleSidebar() {
      if (!this.showLeftWindow) {
        uni.showLeftWindow()
      } else {
        uni.hideLeftWindow()
      }
    },
    showChoice(){
      uni.showModal({
        title: this.getTranslate(2),
        content: this.getTranslate(3),
        showCancel: true,
        success: (res) => {
          if(res.confirm){
            this.setUserHasLogin(false)
            uniWrapper.removeUniCache('userInfo')
            uni.redirectTo({
              url: '/pages/login/login',
              fail: () => {
                segModal.redirectErrorModal('login')
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid darken($top-window-bg-color, 8%);
  background-color: $top-window-bg-color;
  color: $top-window-text-color;
}

.navbar {
  font-size: 14px;
  position: relative;
  height: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  min-width: 223px;
  display: flex;
  align-items: center;

  image {
    // logo宽高开发者可根据情况自行调节
    width: 30px;
    height: 30px;
  }

  text {
    margin-left: 8px;
  }
}

.menu-icon {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.navbar-middle,
.navbar-right {
  flex: 1;
  /* #ifdef MP */
  margin-right: 97px;
  /* #endif */
}

.navbar-left {
  display: flex;
}

// 在平板以下，保持navbar-middle
@media screen and (max-width: 767px) {
  .navbar-left {
    flex: 1;
    /* #ifdef MP */
    margin-right: 97px;
    /* #endif */
  }
}

.navbar-middle,
.username {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-middle {
  text-align: center;
}

.username {
  max-width: 150px;
}

.title-text {
  font-size: 14px;
  line-height: 30px;
}

.navbar-menu {
  display: flex;
}

.menu-item {
  padding: 8px;
  font-size: 16px;
  color: #555;
  line-height: 1;
}

.debug {
  margin: 0 30px;
  display: inline-block;
  position: relative;
}

.debug-badge {
  position: absolute;
  top: 5px;
  right: 14px;
  transform: translateY(-50%) translateX(100%) scale(0.8);
}

.arrowdown {
  margin-top: 4px;
  margin-left: 3px;
}

.person {
  margin-top: 2px;
  margin-right: 2px;
}

.navbar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navbar-right .uni-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  z-index: 999;
}

.popup-menu__arrow {
  position: absolute;
  top: -6px;
  right: 20px;
  border-width: 6px;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .1));
}

.popup-menu__arrow::after {
  content: " ";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  top: 1px;
  margin-left: -10px;
  border-top-width: 0;
  border-bottom-color: #fff;
}

/* 大屏时，隐藏的内容 */
.menu-icon,
.navbar-middle,
  // .navbar-user,
.popup-menu__arrow,
.navbar-right .uni-mask {
  display: none;
}

/* 小屏，显示的内容 */
.navbar-mini .menu-icon {
  display: block;
}

.navbar-user {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 小屏时，隐藏的内容 */
.navbar-mini .logo,
.navbar-mini .debug,
.navbar-menu,
  // .navbar-mini .navbar-menu .username
{
  display: none;
}

.navbar-menu {
  width: 100px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  /* #ifdef MP */
  // right: 97px;
  /* #endif */
  top: 27px;
  /* #ifndef H5 */
  // top: 85pxs: ;
  /* #endif */
  background-color: #fff;
  z-index: 999;
  padding: 10px 0;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
}

/* 小屏时，弹出下拉菜单 */
.popup-menu .navbar-menu {
  display: flex;
}

.popup-menu .popup-menu__arrow,
.popup-menu .navbar-right .uni-mask {
  display: block;
}

.hover-highlight:hover {
  color: $menu-text-color-actived;
}

.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  fill: currentColor;
  overflow: hidden;
}

.password-popup {
  padding: 30px;
}


.language-item {
  font-stretch: 12px;
  vertical-align: baseline;
  text-decoration: underline;
}

.lang-icon {
  font-size: 18px;
  margin-top: 5px;
  margin-right: 30px;
}

.user-icon {
  font-size: 20px;
}

.pointer {
  cursor: pointer;
}
</style>
